import { useDispatch, useSelector } from 'react-redux'
import { hide } from '@/store/toastSlice'
import './toast.less'
export default function Toast() {
  const { show, type, message } = useSelector((state: IRootStore) => state.toast)
  const dispatch = useDispatch()

  // 每次修改 响应式的数据， 都会 触发 函数组件的重新执行
  if (show) {
    setTimeout(() => dispatch(hide()), 2000);
  }

  // const type = "success"
  return <div className={["toast", 'flex', type].join(' ')} style={{ display: show ? 'block' : 'none' }}>
    {/* <img src={type=='success' ? 'a.png' : 'b.png'} alt="" /> */}
    <span>{message}</span>
  </div>
}